<template>
	<view class="main">
		<zmm-watermark :watermark="watermark"></zmm-watermark>
		<view class="tab">
			<view @tap="seleTab = 1" :class="{item:true,active:seleTab == 1}">
				收益
			</view>
			<view @tap="seleTab = 2" v-if="userInfo.is_year_bonus == 1 && userInfo.has_year_bonus > 0" :class="{item:true,active:seleTab == 2}">
				激励计划
			</view>
			<view @tap="seleTab = 3" v-if="userInfo.jixiao > 0" :class="{item:true,active:seleTab == 3}">
				绩效
			</view>
		</view>
		<view class="header">
			<view class="one">
				<image :src="userInfo.avatar" mode=""></image>
				<view class="name">
					{{userInfo.nickname}}
				</view>
			</view>
			<view class="num" v-if="seleTab == 1">
				￥{{userInfo.last_money}}
			</view>
			<view class="num2" v-if="seleTab == 2">
				￥<input v-model="money" type="number" :value="money " />
			</view>
			<view class="num2" v-if="seleTab == 3">
				￥<input v-model="money" type="number" :value="money " />
			</view>
			<view class="msg" v-if="seleTab == 1">
				提现只能提现上月收益金额
			</view>
			<view class="msg" v-else>
				<text v-if="userInfo.is_unfreeze_year_bonus == 1">可提现</text>
				<text v-else>不可提现</text>
			</view>
		</view>
		<view class="tag">
			<view class="in">
				<view class="msg" v-if="seleTab == 1">
					上月收益：
					<span>￥{{userInfo.last_money}}</span>
				</view>
				<view class="msg" v-if="seleTab == 1">
					本月收益：
					<span>￥{{userInfo.current_money}}</span>
				</view>
				<view class="msg" v-if="seleTab == 2">
					激励计划收益：
					<span>￥{{userInfo.has_year_bonus}}</span>
				</view>
				<view class="msg" v-if="seleTab == 3">
					绩效收益：
					<span>￥{{userInfo.jixiao}}</span>
				</view>
			</view>
		</view>
		<view class="btn" @tap="apply()">
			申请提现
		</view>
		<view class="info">
			<view class="infoheader">
				<view class="msg">
					提现明细
				</view>
				<view class="sele" @tap="show = true">
					{{date}}
				</view>
			</view>
			<ul class="list">
				<li v-for="(item,index) in list" :key="index">
					<view class="left">
						<view class="msg">
							<p class="zi" v-if="item.status == 0">已申请</p>
							<p class="red" v-else-if="item.status == -1">已拒绝</p>
							<p class="lu" v-else>已同意</p>
						</view>
						<view class="time">
							{{item.createtime}}
						</view>
					</view>
					<view class="right">
						￥{{item.money}}
					</view>
				</li>
			</ul>
		</view>
		<u-datetime-picker :show="show" v-model="value1" mode="year-month" :maxDate="maxDate" @confirm="confirm" @cancel="show = false" @close="show = false" :closeOnClickOverlay="true"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		innerinfo,
		Withdraw,
		Withdrawlists
	} from '@/api/inner.js'
	export default{
		data(){
			return{
				show:false,
				value1:Number(new Date()),
				maxDate:Number(new Date()),
				userInfo:{},
				date:'',
				list:[],
				watermark:'',
				seleTab:1,
				money:'',
				money2:''
			}
		},
		onLoad() {
			this.watermark = uni.getStorageSync('watermark')
			let now = new Date()
			let y = now.getFullYear()
			let m = now.getMonth() + 1
			this.date = `${y}-${m}`
			this.getInfo()
			this.getList()
		},
		methods:{
			async apply(){
				let obj = {}
				if(this.seleTab == 1){
					obj = {
						type:this.seleTab,
					}
				}
				if(this.seleTab == 2){
					obj = {
						type:this.seleTab,
						money:this.money
					}
				}
				if(this.seleTab == 3){
					obj = {
						type:this.seleTab,
						money:this.money2
					}
				}
				let res = await Withdraw(obj)
				console.log(res)
				if(res.code == 1){
					uni.showToast({
						title:'提交成功',
						icon:'none'
					})
					this.getInfo()
					this.getList()
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			confirm(e){
				let date = new Date(e.value)
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				this.date = `${y}-${m}`
				this.getList()
				this.show = false
			},
			async getList(){
				let res = await Withdrawlists({
					date:this.date
				})
				console.log(res)
				this.list = res.data.data
			},
			async getInfo(){
				let res = await innerinfo()
				this.userInfo = res.data
				this.money = this.userInfo.has_year_bonus
				this.money2 = this.userInfo.jixiao
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: calc(100vh - 44px);
		background-color: #F6F7FB;
		padding: 15px;
		.tab{
			display: flex;
			margin-bottom: 30rpx;
			.item{
				padding: 10rpx 15rpx;
				background-color: #3D3D3D;
				border-radius: 100rpx;
				color: #fff;
				margin-right: 20rpx;
			}
			.active{
				background-color: #0C80FB;
			}
		}
		.header{
			background-image: url('@/static/img/txBg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 20px 25px 40px;
			color: #fff;
			.one{
				display: flex;
				align-items: center;
				margin-bottom: 30px;
				image{
					width: 30px;
					height: 30px;
					border-radius: 100px;
					border: 1px solid #fff;
					margin-right: 8px;
				}
			}
			.num{
				font-size: 30px;
				margin-bottom: 30px;
			}
			.num2{
				display: flex;
				font-size: 30px;
				margin-bottom: 30px;
				input{
					font-size: 30px;
				}
			}
			.msg{
				font-size: 14px;
			}
		}
		.tag{
			padding: 0 5px;
			.in{
				padding: 12px;
				background-color: #fff;
				border-radius: 0 0 10px 10px;
				display: flex;
				font-size: 12px;
				color: #666666;
				.msg{
					margin-right: 15px;
					span{
						color: #0C80FB;
					}
				}
			}
		}
		.btn{
			width: 100%	;
			font-size: 14px;
			color: #fff;
			padding: 10px 0;
			border-radius: 100px;
			background-color: #0A84FF;
			text-align: center;
			margin-bottom: 20px;
			margin-top: 25px;
		}
		.info{
			padding: 15px 10px;
			background-color: #fff;
			border-radius: 10px;
			.infoheader{
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #3D3D3D;
				margin-bottom: 10px;
				.sele{
					color: #777777;
					font-size: 14px;
					padding: 10px 15px;
					background-color: #F1F2F2;
					border-radius: 100px;
				}
			}
			.list{
				li{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10px;
					.left{
						.msg{
							font-size: 14px;
							color: #3D3D3D;
							margin-bottom: 5px;
						}
						.time{
							color: #999999;
							font-size: 12px;
						}
					}
					.right{
						color: #3D3D3D;
						font-size: 14px;
					}
				}
			}
		}
	}
</style>